<template>
  <div>
    <el-form ref="ruleForm" :inline="true" class="demo-form-inline" style="margin-top: 20px;">
      <el-form-item prop="name">
        <el-input placeholder="来源查询" style="width: 300px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
        <el-button type="success">新增</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%"
    >
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column property="order" label="编号" width="120"></el-table-column>
      <el-table-column property="name" label="动漫名字" width="120"></el-table-column>
      <el-table-column property="publish" label="发行社" width="120"></el-table-column>
      <el-table-column property="writer" label="作者" width="100"></el-table-column>
      <el-table-column property="distime" label="发行时间" width="100"></el-table-column>
      <el-table-column property="state" label="状态" width="280"></el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" width="500px">
      <el-form
        status-icon
        ref="pojoForm"
        :model="pojo"
        label-width="100px"
        label-position="right"
        style="width: 400px;"
      >
        <el-form-item label="序号" prop="order">
          <el-input v-model="pojo.order" />
        </el-form-item>
        <el-form-item label="动漫名字" prop="name">
          <el-input v-model="pojo.name" />
        </el-form-item>
        <el-form-item label="发行社" prop="publish">
          <el-date-picker v-model="pojo.publish" type="date" placeholder="请点击选择" />
        </el-form-item>
        <el-form-item label="作者" prop="writer">
          <el-input v-model="pojo.writer" />
        </el-form-item>
        <el-form-item label="发行时间" prop="distime">
          <el-input v-model="pojo.distime" />
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-input v-model="pojo.state"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ResouApi from "@/api/resou";
export default {
  data() {
    return {
      tableData: [
        {
          order: "09487346",
          name: "斗罗大陆",
          publish: "腾讯",
          writer: "唐家三少",
          distime: "2018年",
          state: "连载中"
        }
      ],
      currentRow: null,
      dialogFormVisible: false,
      pojo: {
        order: "",
        name: "",
        publish: "",
        writer: "",
        distime: "",
        state: ""
      }
    };
  },

  methods: {
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    handleClick(row) {
      console.log(row);
    },
    async getdata() {
      try {
        let p = await ResouApi.getlist();
        this.tableData = p.data.data;
      } catch (err) {
        console.log(err);
      }
    }
  },
  created() {
    this.getdata();
  }
};
</script>

<style scoped>
.el-form-item__content button {
  float: left;
}
.el-button--primary {
  display: block;
  width: 120px;
}
.el-button--success {
  display: block;
  width: 120px;
}
.el-button--default {
  display: block;
  width: 120px;
}
</style>